<%--
  Created by IntelliJ IDEA.
  User: ShiYan.Shi
  Date: 2018/11/14        
  Time: 0:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/common/taglibs.jspf" %>
<!DOCTYPE html>
<html>
<head>
    <title><spring:message code="sys.user.title" /></title>
    <meta name="decorator" content="list"/>

    <link rel="stylesheet" href="${staticPath}/plugins/bootstrap-treeview/bootstrap-treeview.css">
    <script src="${staticPath}/plugins/bootstrap-treeview/bootstrap-treeview.js"></script>
    <style>
        .layui-card-header{
            padding-left: 5px;
        }
        .layui-card-body{
            padding-left: 5px;
        }
        .layui-input-block{
            margin-left: 90px;
        }
        .layui-form-mid{
            padding: 0px !important;
        }
        .layui-form .layui-input, .layui-form .layui-textarea, .layui-form .layui-select{
            width:100px;
        }

    </style>
</head>
<body title="<spring:message code="sys.user.title" />">
<div class="layui-col-md3 layui-col-lg3" id="leftContent">
    <div class="layui-card" lay-filter="queryTab">
        <div class="layui-card-header">石蜡病理记录</div>
        <div class="layui-card-body layui-col-space5">
            <div class="layui-form" id="sampleForm">
                <div class="layui-form-item">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">匹配区分:</label>
                        <div class="layui-input-block">
                            <select name="matchingDistinctionSelect" lay-filter="matchingDistinctionSelect" id="matchingDistinctionSelect">
                                <option value="">全部</option>
                                <c:forEach var="item" items="${matchingDistinctionList}">
                                    <option value="${item.code}">${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">患者姓名:</label>
                        <div class="layui-input-block">
                            <input id="patientName" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">病理编号:</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input id="startPathologyCode" type="text" name="price_min" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input id="endPathologyCode" type="text" name="price_max" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登记日期:</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input id="startRegistrationDate" type="text" placeholder="" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input id="endRegistrationDate" type="text" placeholder="" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="leftQueryButton" class="layui-btn layui-btn-md" onclick="leftQuery();">查询</button>
                        <button id="leftResetButton" class="layui-btn layui-btn-primary layui-btn-md" onclick="leftReset();">重置</button>
                    </div>
                </div>
            </div>
            <div>
                <grid:grid id="pathologySampleList" shrinkToFit="true" pageable="false" caption="石蜡病理列表"
                           multiselect="false" height="100" onSelectRow="pathologySampleSelected">
                    <grid:column label="lab.apply.applyId" name="applyId" hidden="true" key="true"/>
                    <grid:column label="匹配区分" name="projectId"/>
                    <grid:column label="患者姓名" name="num"/>
                    <grid:column label="门诊住院号" name="unit"/>
                    <grid:column label="石蜡病理号" name="irradiator" dict="yesOrNo"/>
                </grid:grid>
            </div>
        </div>
    </div>
</div>
<div class="layui-col-md6 layui-col-lg6" id="middleContent">
    <div class="layui-card">
        <div class="layui-card-body">
            <spring:message code="sys.common.common.function"/>
            <span class="layui-btn-lg" style="margin-left: 100px;color: red" id="showMatching">完全符合</span>
            <div style="float:right">
                <button class="layui-btn layui-btn-md layui-bg-orange">完全符合</button>
                <button class="layui-btn layui-btn-md layui-bg-green">基本符合</button>
                <button class="layui-btn layui-btn-md layui-bg-blue">不符合</button>
                <button class="layui-btn layui-btn-md layui-bg-gray">撤销匹配</button>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body layui-row layui-col-space5">
            <div class="layui-bg-red">
                <div class="layui-inline layui-col-md3">
                    门诊住院号：<span>1231</span>
                </div>
                <div class="layui-inline layui-col-md3">
                    病人姓名：<span id="showPatientName">张三</span>
                </div>
                <div class="layui-inline layui-col-md3">
                    年龄：<span id="showAge">33</span>
                </div>
                <div class="layui-inline">
                    性别：<span id="showSex">男</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">石蜡申请及诊断结果
            <button class="layui-btn layui-btn-md layui-bg-orange" style="float:right">查看报告</button>
        </div>
        <div class="layui-card-body layui-row layui-col-space5">
            <div class="layui-col-md4">
                <label class="layui-form-label">病理编号：</label>
                <div class="layui-input-block">
                    <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label">审核医生：</label>
                <div class="layui-input-block">
                    <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label">报告时间：</label>
                <div class="layui-input-block">
                    <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-tab layui-tab-card" lay-filter="showtab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">病理诊断</li>
                        <li>诊断图像</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" style="height: 200px;">
                            <div class="layui-form-item layui-form-text">
                                <div>
                                    <textarea name="desc" placeholder="" class="layui-textarea layui-disabled" disabled="disabled" style="height: 200px;"></textarea>
                                </div>
                            </div>

                        </div>
                        <div class="layui-tab-item" style="height: 200px;">
                            <div>
                                <img src="" style="height: 200px;width:400px"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">可与石蜡匹配及诊断列表
        </div>
        <div class="layui-card-body layui-row layui-col-space5">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>昵称</th>
                    <th>加入时间</th>
                    <th>签名</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>贤心</td>
                    <td>2016-11-29</td>
                    <td>人生就像是一场修行</td>
                </tr>
                <tr>
                    <td>许闲心</td>
                    <td>2016-11-28</td>
                    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="layui-card">
        <div class="layui-card-header">细胞申请及诊断结果
            <button class="layui-btn layui-btn-md layui-bg-orange" style="float:right">查看报告</button>
        </div>

        <div class="layui-card-body layui-row layui-col-space5">
            <div class="layui-col-md4">
                <label class="layui-form-label">病理编号：</label>
                <div class="layui-input-block">
                    <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label">审核医生：</label>
                <div class="layui-input-block">
                    <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label">报告时间：</label>
                <div class="layui-input-block">
                    <input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input layui-disabled" disabled="disabled">
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-tab layui-tab-card" lay-filter="showtab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">病理诊断</li>
                        <li>诊断图像</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" style="height: 200px;">
                            <div class="layui-form-item layui-form-text">
                                <div>
                                    <textarea name="desc" placeholder="" class="layui-textarea layui-disabled" disabled="disabled" style="height: 200px;"></textarea>
                                </div>
                            </div>

                        </div>
                        <div class="layui-tab-item" style="height: 200px;">
                            <div>
                                <img src="" style="height: 200px;width:400px"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<div class="layui-col-md3 layui-col-lg3" id="rightContent">
    <div class="layui-card" lay-filter="queryTab">
        <div class="layui-card-header">诊断匹配记录</div>
        <div class="layui-card-body layui-col-space5">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">匹配类型:</label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                                <option value="">全部</option>
                                <c:forEach var="item" items="${matchingTypeList}">
                                    <option value="${item.code}">${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label">患者姓名:</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">石蜡病理号:</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_min" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_max" placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">匹配日期:</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input id="startMatchingDate" type="text" placeholder="" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input id="endMatchingDate" type="text" placeholder="" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="rightQueryButton" class="layui-btn layui-btn-md" onclick="rightQuery()">查询</button>
                        <button id="rightResetButton" class="layui-btn layui-btn-primary layui-btn-md" onclick="rightReset()">重置</button>
                    </div>
                </div>

            </div>

            <div>
                <grid:grid id="diagnosisMatchingList" shrinkToFit="true" pageable="false" caption="诊断匹配列表"
                           multiselect="false" height="100" onSelectRow="diagnosisMatchingSelected">
                    <grid:column label="lab.apply.applyId" name="applyId" hidden="true" key="true"/>
                    <grid:column label="匹配类型" name="projectId"/>
                    <grid:column label="患者姓名" name="num"/>
                    <grid:column label="石蜡病理号" name="irradiator" dict="yesOrNo"/>
                    <grid:column label="匹配病理号" name="unit"/>
                </grid:grid>
            </div>


        </div>
    </div>
</div>
<script>


    layui.use(['layer', 'form','element','laydate'], function(){
        var layer = layui.layer,
            form = layui.form,
            element = layui.element,
            laydate = layui.laydate;


        //初始化laydate
        initRegistrationDate(laydate);

        var _startDate =laydate.render({
            elem: '#startMatchingDate',
            btns: ['clear', 'confirm'],//设置底部按钮
            value:getDateStr(-7),//设置默认值为七天前日期
            max:0,//设置最大值为当前日期
            done: function (value, date) { //开始日期改变时设置结束日期的最小值
                if (value !== '') {
                    _endDate.config.min.year = date.year;
                    _endDate.config.min.month = date.month - 1;
                    _endDate.config.min.date = date.date;
                } else {
                    _endDate.config.min.year = '';
                    _endDate.config.min.month = '';
                    _endDate.config.min.date = '';
                }
            }
        });
        var _endDate =laydate.render({
            elem: '#endMatchingDate',
            btns: ['clear', 'confirm'],//设置底部按钮
            value: new Date(),//设置默认值为当前日期
            max: 0,//设置最大值为当前日期
            done: function (value, date) {//结束日期改变时设置开始日期的最大值
                if (value !== '') {
                    _startDate.config.max.year = date.year;
                    _startDate.config.max.month = date.month - 1;
                    _startDate.config.max.date = date.date;
                } else {
                    _startDate.config.max.year = '';
                    _startDate.config.max.month = '';
                    _startDate.config.max.date = '';
                }
            }
        });

        //select change事件
        /*form.on('select(matchingDistinctionSelect)', function(data){
            getSampleList();
        });*/

    });

    //初始化登记时间控件
    function initRegistrationDate (laydate){
        var startDate  = laydate.render({
            elem: '#startRegistrationDate',
            btns: ['clear', 'confirm'],//设置底部按钮
            value:getDateStr(-7),//设置默认值为七天前日期
            max:0,//设置最大值为当前日期
            done: function (value, date) { //开始日期改变时设置结束日期的最小值
                if (value !== '') {
                    endDate.config.min.year = date.year;
                    endDate.config.min.month = date.month - 1;
                    endDate.config.min.date = date.date;
                } else {
                    endDate.config.min.year = '';
                    endDate.config.min.month = '';
                    endDate.config.min.date = '';
                }
            }
        });
        var endDate  =laydate.render({
            elem: '#endRegistrationDate',
            btns: ['clear', 'confirm'],//设置底部按钮
            value: new Date(),//设置默认值为当前日期
            max: 0,//设置最大值为当前日期
            done: function (value, date) {//结束日期改变时设置开始日期的最大值
                if (value !== '') {
                    startDate.config.max.year = date.year;
                    startDate.config.max.month = date.month - 1;
                    startDate.config.max.date = date.date;
                } else {
                    startDate.config.max.year = '';
                    startDate.config.max.month = '';
                    startDate.config.max.date = '';
                }
            }
        });
    }


    function leftQuery(){
        //获取数据
        var data ={};
        data.matchingDistinction = $("#matchingDistinctionSelect").val();
        data.patientName = $("#patientName").val();
        data.startPathologyCode = $("#startPathologyCode").val();
        data.endPathologyCode = $("#endPathologyCode").val();
        data.startCreateDate = $("#startRegistrationDate").val();
        data.endCreateDate = $("#endRegistrationDate").val();

        //异步请求更新grid
        $.ajax({
            type: "get",
            dataType: "json",
            contentType:"application/json;charset=utf-8",
            data: data,
            url: baseUrl + "/physician/diagnosisMatching/getSampleList",
            success: function (a) {
                // 清空数据
                $("#pathologySampleListGrid").jqGrid("clearGridData");
                //设定数据
                $("#pathologySampleListGrid")[0].addJSONData(a);
            }
        })
    }

    function getDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
        var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0
        return y+"-"+m+"-"+d;
    }


    function leftReset(){
        $("#matchingDistinctionSelect").val("");
        $("#patientName").val("");
        $("#startPathologyCode").val("");
        $("#endPathologyCode").val("");
        initRegistrationDate(layui.laydate);
        layui.form.render();
    }




    function pathologySampleSelected(){
        return null;
    }

    function diagnosisMatchingSelected(){
        return null;
    }


    //页面初始化
    $(function(){
        //设置登记日期-初始化，当前日期和七日前日期
        var date =new Date



    });


    function matchingDistinctionSelectChange() {
        alert("1111");
    }



</script>
</body>
</html>
